<template>
  <div class="app-container">
    <div class="search_box">
      <div>
        <span> 所属部门: </span>
        <el-input
          placeholder="请输入"
          v-model="search.dept"
          size="small"
          clearable
        >
        </el-input>
      </div>
      <div>
        <span> 系统名称: </span>
        <el-input
          placeholder="请输入"
          v-model="search.system"
          size="small"
          clearable
        >
        </el-input>
      </div>
      <el-button size="small" class="search_btn" type="primary" @click="searchOperate(1)">
        查询
      </el-button>
      <el-button size="small" class="search_btn" type="info" @click="searchOperate(2)">
        重置
      </el-button>
      <el-button size="small" class="search_btn" type="warning">
        导入
      </el-button>
      <el-button size="small" class="search_btn" type="danger">
        导出
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
      height="calc(100vh - 180px)"
    >
      <el-table-column align="center" v-for="(header, index) in headers" :key="index"
         :prop="header.key"
         :label="header.label"
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        headers: null,
        list: null,
        listLoading: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        search: {
          dept: "",
          system: "",
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        this.$store.dispatch('general/getHeaders').then((headers) => {
          this.$store.dispatch('general/getList').then((list) => {
            if(this.search.dept) {
              list = list.filter(data => !this.search.dept || data.k1.toLowerCase().includes(this.search.dept.toLowerCase()));
            }
            if(this.search.system) {
              list = list.filter(data => !this.search.system || data.k2.toLowerCase().includes(this.search.system.toLowerCase()));
            }
            this.headers = headers;
            const startIndex = (this.pageNum - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            this.total = list.length;
            this.list = list.slice(startIndex, endIndex);
            this.listLoading = false;
          })
        })
      },
      handleSizeChange(val) {
        this.pageNum = 1;
        this.pageSize = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.fetchData();
      },
      searchOperate(type) {
        if (type == 2) {
          this.search = {
            dept: "",
            system: "",
          };
        }
        this.fetchData();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/common.scss";

</style>
